<template>
  <div>
    <div class="grid-container">
      <el-card class="grid-item">
        <div slot="header">
          <span>系统简介</span>
        </div>
        <div>
          <!-- 将数据绑定到页面元素 -->
          <p><strong>前端：</strong>Vue+Element</p>
          <p><strong>后端：</strong>SpringBoot+MyBatis+JJWT+Redis</p>
          <p><strong>数据库：</strong>MySQL</p>
        </div>
      </el-card>
      <el-card class="grid-item">
        <div slot="header">
          <span>系统信息</span>
        </div>
        <div>
          <!-- 将数据绑定到页面元素 -->
          <p><strong>运行时间:</strong> {{ ServerRunTime }}</p>
        </div>
      </el-card>
      <el-card class="grid-item">
        <div slot="header">
          <span>开发人员</span>
        </div>
        <div>
          <!-- 将数据绑定到页面元素 -->
          <p><strong>开发:</strong>
            duxingmengshou
          </p>
        </div>
      </el-card>
      <el-card class="grid-item">
        <div slot="header">
          <span>致谢</span>
        </div>
        <div>
          <!-- 将数据绑定到页面元素 -->
          <p>项目中使用到了很多开源库，感谢这些开源作者</p>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MasterPanel',
  data() {
    return {
      ServerRunTime: null
    }
  },
  computed: {},
  mounted() {
    this.getSysServerRunTime()
    // 设置定时服务
    setInterval(this.getSysServerRunTime, 1000)
  },
  methods: {
    getSysServerRunTime() {
      axios.get(process.env.VUE_APP_BASE_API + '/sys/bootTime') // 发送GET请求到指定的后端API接口
        .then(response => {
          // 处理响应数据
          this.ServerRunTime = response.data.data['BootTime']
          // console.log(response.data.data['BootTime'])
          // 获取浏览器当前时间
          var currentTime = new Date()
          var backendStartTime = new Date(response.data.data['BootTime'])
          var systemRunTime = currentTime - backendStartTime
          var hours = Math.floor(systemRunTime / (1000 * 60 * 60))
          var minutes = Math.floor((systemRunTime % (1000 * 60 * 60)) / (1000 * 60))
          var seconds = Math.floor((systemRunTime % (1000 * 60)) / 1000)
          this.ServerRunTime = hours + ' 小时 ' + minutes + ' 分钟 ' + seconds + ' 秒'
          // console.log('系统运行时间：', formattedRunTime)
        })
        .catch(error => {
          // 处理错误
          console.error(error)
        })
    }
  }
}
</script>

<style lang="scss" scoped>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  padding: 15px;
}

.grid-item {
  //padding: 20px;
}
</style>
